<template>
  <div class="big">
    <div class="cneter">
      <div class="header">
        <ul>
          <li><div class="head-font"></div></li>
          <li><p>&nbsp; 服务包管理</p></li>
        </ul>
      </div>

      <div class="state">
        <el-form>
          <el-row>
            <el-col :span="3" class="bel-2">
              <el-form-item label="服务包">
                <el-select v-model="service.id" clearable>
                  <el-option
                    v-for="item in service"
                    :key="item.id"
                    :label="item.server_type"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6" id="n-1">
              <el-form-item label="">
                <el-input
                  v-model="service.server_name"
                  clearable
                  placeholder="请输入名称"
                  style="200px"
                  id="n-2"
                >
                  <!-- clearable 输入框可清除属性 -->
                </el-input>
              </el-form-item>
            </el-col>
            <el-button
              style="
                margin-top: 13px;
                margin-left: 80px;
                border: 1px solid #0066ff;
                padding: 6px 19px;
                border: 1px solid #f6f9fc;
                background-color: #f6f9fc;
                font-size: 15px;
                color: #1877f2;
                line-height: 33px;
                border-radius: 7px;
                cursor: pointer;
                border: none;
                width: 120px;
                color: #0066ff;
              "
              @click="search"
              >搜索</el-button
            >
          </el-row>
        </el-form>
      </div>

      <div class="chiji_title"><span>初级包</span></div>

      <!-- 只展示前三条数据 -->
      <div class="chiji">
        <div
          @click="server_bag_two(obj.id)"
          class="basics_bag"
          v-for="(obj, index) in list.slice(0, 3)"
          :key="index"
        >
          <div class="b">
            <div class="c"></div>
            <span>{{
              obj.server_grade == 1
                ? "使用中"
                : obj.server_grade == 2
                ? "待审核"
                : obj.server_grade == 3
                ? "已停用"
                : obj.server_grade == 4
                ? "以驳回"
                : ""
            }}</span>
          </div>
          <div class="basics_bag_img">
            <div class="basics_img">
              <img width="100%" height="100%" src="u5702.png" alt="" />
            </div>
          </div>
          <div class="basics_bag_font">
            <div class="basics_title">
              <p>
                <span>{{ obj.server_name }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <p>
                <span class="server_obj">服务对象：</span
                ><span class="server_obj">{{ obj.server_object }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <p>
                <span class="my_sp2">{{ obj.server_label }}</span
                >&nbsp;
                <span class="my_sp3">{{ obj.server_label_two }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="center_title"><span>中级包</span></div>

      <div class="zhongji">
        <div
         @click="server_bag_one(obj.id)"
          class="center_bag"
          v-for="(obj, index) in list2.slice(0, 5)"
          :key="index"
        >
          <div class="bb">
            <div class="cc"></div>
            <span>{{
              obj.server_grade == 1
                ? "使用中"
                : obj.server_grade == 2
                ? "待审核"
                : obj.server_grade == 3
                ? "已停用"
                : obj.server_grade == 4
                ? "以驳回"
                : ""
            }}</span>
          </div>

          <div class="basics_bag_img">
            <div class="basics_img">
              <img width="100%" height="100%" src="u5911.png" alt="" />
            </div>
          </div>

          <div class="basics_bag_font">
            <div class="basics_title">
              <p>
                <span>{{ obj.server_name }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <span class="server_obj">服务对象：</span
              ><span class="server_obj">{{ obj.server_object }}</span>
            </div>
            <div class="basics_title2">
              <p>
                <span class="my_sp22">{{ obj.server_label }}</span
                >&nbsp;
                <span class="my_sp33">{{ obj.server_label_two }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="chiji_title"><span>高级包</span></div>

      <div class="chiji">
        <div
          @click="server_bag_three(obj.id)"
          class="basics_bag"
          v-for="(obj, index) in list3.slice(0, 3)"
          :key="index"
        >
          <div class="bbb">
            <div class="ccc"></div>
            <span>{{
              obj.server_grade == 1
                ? "使用中"
                : obj.server_grade == 2
                ? "待审核"
                : obj.server_grade == 3
                ? "已停用"
                : obj.server_grade == 4
                ? "以驳回"
                : ""
            }}</span>
          </div>

          <div class="basics_bag_img">
            <div class="basics_img">
              <img width="100%" height="100%" src="u6881.png" alt="" />
            </div>
          </div>

          <div class="basics_bag_font">
            <div class="basics_title">
              <p>
                <span>{{ obj.server_name }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <p>
                <span class="server_obj">服务对象：</span
                ><span class="server_obj">{{ obj.server_object }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <p>
                <span class="my_sp22">{{ obj.server_label }}</span
                >&nbsp;
                <span class="my_sp333">{{ obj.server_label_two }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="chiji_title"><span>特许定制包</span></div>

      <div class="chiji">
        <div
          class="basics_bag"
          v-for="(obj, index) in list4.slice(0, 3)"
          :key="index"
        >
          <div class="bbbb">
            <div class="cccc"></div>
            <span>{{
              obj.server_grade == 1
                ? "使用中"
                : obj.server_grade == 2
                ? "待审核"
                : obj.server_grade == 3
                ? "已停用"
                : obj.server_grade == 4
                ? "以驳回"
                : ""
            }}</span>
          </div>

          <div class="basics_bag_img">
            <div class="basics_img">
              <img width="100%" height="100%" src="u6911.svg" alt="" />
            </div>
          </div>

          <div class="basics_bag_font">
            <div class="basics_title">
              <p>
                <span>{{ obj.server_name }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <p>
                <span class="server_obj">服务对象：</span
                ><span class="server_obj">{{ obj.server_object }}</span>
              </p>
            </div>
            <div class="basics_title2">
              <p>
                <span class="my_sp22">{{ obj.server_label }}</span
                >&nbsp;
                <span class="my_sp333">{{ obj.server_label_two }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  mounted() {
    this.findServerBag();
    this.chaxun();
    // this.search();
  },

  methods: {
    server_bag_one(val) {
        this.$router.push({path:'/servicePackDetail',});
    },
    server_bag_two(val) {
        this.$router.push({path:'/servicePackDetail_two',});
    },
    server_bag_three(val) {
        this.$router.push({path:'/servicePackDetail_three',});
    },

    search() {
      axios({
        url: "api/serverBag/findServerBag",
        mounted: "GET",
        params: {
          server_grade: this.service.id,
          server_name: this.service.server_name,
        },
      }).then((res) => {
        this.list = [];
        this.list2 = [];
        this.list3 = [];
        this.list4 = [];
        res.data.forEach((element) => {
          if (element.server_grade == 1) {
            this.list.push(element);
          } else if (element.server_grade == 2) {
            this.list2.push(element);
          } else if (element.server_grade == 3) {
            this.list3.push(element);
          } else if (element.server_grade == 4) {
            this.list4.push(element);
          }
        });
        // this.server = res.data;
      });
    },
    // resident(val) {
    // this.$router.push('/Healthy');
    // this.$router.push({path:'/Healthy',query:{id:val}});
    // }
    // 查询
    findServerBag() {
      axios({
        url: "api/serverBag/findServerBag",
        params: {},
      }).then((res) => {
        res.data.forEach((element) => {
          if (element.server_state == 1) {
            this.list.push(element);
          } else if (element.server_state == 2) {
            this.list2.push(element);
          } else if (element.server_state == 3) {
            this.list3.push(element);
          } else if (element.server_state == 4) {
            this.list4.push(element);
          }
        });
      });
    },
    chaxun() {
      axios({
        url: "api/serverBag/getServerType",
      }).then((res) => {
        // console.log(res.data);
        this.service = res.data;
      });
    },
  },

  data() {
    return {
      name: "",
      list: [], // 商品所有数据
      list2: [], // 商品所有数据
      list3: [], // 商品所有数据
      list4: [], // 商品所有数据
      service: [], //服务包
      server: [],
    };
  },
};
</script>

<style>
li {
  list-style: none;
}
.server_obj {
  font-size: 15px;
}
.header ul {
  width: 1289px;
  height: 50px;
  background-color: #ffffff;
  display: flex;
  padding-top: 20px;
  padding-left: 30px;
}
.header ul p {
  font-size: 22px;
}
.head-font {
  background-color: #0066ff;
  width: 7px;
  height: 25px;
  border-radius: 10px;
}

.bbbb {
  width: 100px;
  height: 100px;
  position: absolute;
  /*background: green;*/
  top: -50px;
  right: -50px;
  transform: rotate(45deg);
}
.bbbb span {
  position: absolute;
  bottom: 0;
  display: block;
  font-size: 16px;
  color: #fff;
  background: #fa746b;
  width: 100px;
  height: 27px;
  text-align: center;
}
.bbb {
  width: 100px;
  height: 100px;
  position: absolute;
  /*background: green;*/
  top: -50px;
  right: -50px;
  transform: rotate(45deg);
}
.bbb span {
  position: absolute;
  bottom: 0;
  display: block;
  font-size: 16px;
  color: #fff;
  background: #fddb78;
  width: 100px;
  height: 27px;
  text-align: center;
}
.bb {
  width: 100px;
  height: 100px;
  position: absolute;
  /*background: green;*/
  top: -50px;
  right: -50px;
  transform: rotate(45deg);
}
.bb span {
  position: absolute;
  bottom: 0;
  display: block;
  font-size: 16px;
  color: #fff;
  background: #28d094;
  width: 100px;
  height: 27px;
  text-align: center;
}
.b {
  width: 100px;
  height: 100px;
  position: absolute;
  /*background: green;*/
  top: -50px;
  right: -50px;
  transform: rotate(45deg);
}
.b span {
  position: absolute;
  bottom: 0;
  display: block;
  font-size: 16px;
  color: #fff;
  background: #36a8ff;
  width: 100px;
  height: 27px;
  text-align: center;
}

.my_sp22 {
  background-color: #d8f6ed;
  border-radius: 15px;
  padding: 2px 4px;
  color: #6ad4ad;
  font-size: 16px;
}

.my_sp33 {
  background-color: #e2e4fd;
  border-radius: 15px;
  padding: 2px 4px;
  color: #6c76f4;
  font-size: 16px;
}
.my_sp333 {
  background-color: #f5f2e1;
  border-radius: 15px;
  padding: 2px 4px;
  color: #fddb78;
  font-size: 16px;
}
.my_sp2 {
  background-color: #fee3e1;
  border-radius: 15px;
  padding: 2px 4px;
  color: #fa746b;
  font-size: 16px;
}

.my_sp3 {
  background-color: #d8f6eb;
  border-radius: 15px;
  padding: 2px 4px;
  color: #3dd4b7;
  font-size: 16px;
}
.basics_title2 {
  width: 170px;
  float: left;
  margin-top: 25px;
  margin-left: 17px;
  font-size: 17.2px;
  color: #cccccc;
}
.basics_title {
  float: left;
  margin-top: 25px;
  margin-left: 17px;
  font-size: 20px;
}
.basics_img {
  width: 80%;
  height: 80%;
  float: left;
  /* border-radius: 15px; */
  /* margin: 0 auto; */
  margin-top: 17px;
  margin-left: 17px;
}
.basics_bag_img {
  width: 46%;
  height: 100%;
  float: left;
  border-radius: 15px;
}

.basics_bag:hover {
  padding: 0 0;
  background-color: #f2f7fb;
}
.center_bag:hover {
  padding: 0 0;
  background-color: #f2f7fb;
}

.center_bag {
  width: 30%;
  height: 180px;
  background-color: #ffffff;
  float: left;
  border-radius: 15px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 15px;
  position: relative;
  background: #fff;
  overflow: hidden;
  border: 1px solid #f2f2f2;
}
.basics_bag {
  width: 30%;
  height: 180px;
  background-color: #ffffff;
  border-radius: 15px;
  margin-left: 20px;
  margin-right: 15px;
  position: relative;
  background: #fff;
  overflow: hidden;
  border: 1px solid #f2f2f2;
  float: left;
}
.ssjg {
  font-size: 14px;
  color: #cccccc;
}
.chiji_title {
  padding-top: 40px;
  padding-bottom: 20px;
  padding-left: 20px;
  font-size: 19px;
  width: 100%;
  height: 30px;
  /* background-color: red; */
  float: left;
}
.center_title {
  padding-top: 40px;
  padding-bottom: 0px;
  padding-left: 20px;
  font-size: 19px;
  width: 100%;
  height: 30px;
  /* background-color: red; */
  float: left;
}
.chiji {
  width: 100%;
  height: 180px;
  /* background-color: yellow; */
  float: left;
}
.zhongji {
  width: 100%;
  height: 420px;
  /* background-color: yellow; */
  float: left;
}
.state {
  margin-top: 15px;
  margin-left: 20px;
}

.big {
  width: 100%;
  height: 1550px;
  background-color: aliceblue;
}
.cneter {
  width: 93%;
  height: 1510px;
  background-color: #ffffff;
  margin: 0 auto;
}
.div3 {
  width: 8px;
  height: 20px;
  border-radius: 5px;
  background-color: #2984f8;
  float: left;
  margin-left: 20px;
  margin-right: 20px;
  padding-bottom: 3px;
}

.mainbo-1 {
  width: 94%;
  height: 230px;
  margin-left: 3%;
  float: left;
  position: relative;
}
.bel-2 {
  margin-left: 0px;
  width: 300px;
  margin-top: 15px;
}
#n-1 {
  margin-top: 20px;
  margin-left: 20px;
}
</style>